import {useState} from "react"
import { Button, Checkbox, Form, Input, Spin } from 'antd';
import"@/App.module.css"
import * as api from "@/api/users"
import useStorage from "@/hook/useStorage"
import {useNavigate} from "react-router-dom"
import Loading from "@/components/Loading"
import { LoadingOutlined } from "@ant-design/icons";

//表单验证
const validatorUsername =  (rules:any,value:string) =>{
    if (!value) return Promise.reject('输入不能为空')
    if (value.length>2 && value.length<15) return Promise.resolve()
    return Promise.reject('用户名长度不能小于3位')
}
const validatorPassword =  (rules:any,value:string) =>{
    if (!value) return Promise.reject('输入不能为空')
    if (value.length>2 && value.length<15) return Promise.resolve()
    return Promise.reject('密码长度不能小于3位')    
}
//表单验证
declare global {
    interface loginParam{
        username:string;
        password:string;
        rembered:boolean;
    }
}


const Login = () => {

    //为存储前 准备自定义hook
    let Navigate = useNavigate()
    let [token,tokenStorage] = useStorage('qf-token','localStorage')
    let [,userInfoStorage] = useStorage('user-info','localStorage')
    let [,userpermissionStorage] = useStorage('Btn-permission','localStorage')
    
    const onFinish = (values:loginParam) => {
    let LoadingClose = Loading({visible: true,tip:"登陆中。。",indicator:(<LoadingOutlined style={{ fontSize: 48 }} spin />)})
    // console.log('Success:', values);
        api.loginApi(values.username, values.password)
            .then(res=>{
                // console.log(res)
                if(res.data.state){
                    tokenStorage.set(res.data.token)
                    userInfoStorage.set(res.data.userInfo)
                    userpermissionStorage.set(res.data.permission)
                    Navigate('/')
                }
            })
    };
    // 登录成功

  const onFinishFailed = (errorInfo:any) => {
    // console.log('Failed:', errorInfo);
  };


  return (
    <div className='loginFrom'>
        <Form
        name="basic"
        labelCol={{
            span: 6,
        }}
        wrapperCol={{
            span: 8,
        }}
        initialValues={{
            remember: false,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="on"
        >
        <Form.Item
            label="用户名"
            name="username"
            rules={[
            {
                required: true,
                validator:validatorUsername
            },
            ]}
        >
            <Input />
        </Form.Item>

        <Form.Item
            label="密码"
            name="password"
            rules={[
            {
                required: true,
                validator:validatorPassword
            },
            ]}
        >
            <Input.Password />
        </Form.Item>

        <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
            offset: 8,
            span: 16,
            }}
        >
            <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item
            wrapperCol={{
            offset: 8,
            span: 16,
            }}
        >
            <Button type="primary" htmlType="submit">
            登录
            </Button>
        </Form.Item>
        </Form>
    </div>
  );
};


export default Login